import React, { useState } from 'react';
import { Form, Button, Alert } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { login } from '../../api/userapi';

const Login: React.FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email || !password) {
      setError('邮箱和密码不能为空');
      return;
    }
    setError('');
    try {
      const response = await login({ username: email, password });
      localStorage.setItem('token', response.token);
      // 登录成功后的跳转逻辑，例如跳转到首页
      window.location.href = '/';
    } catch (error) {
      setError(error instanceof Error ? error.message : '登录失败');
    }
  };

  return (
    <div className="container-fluid" style={{ background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)', padding: '0' }}>
      <div className="row h-100 align-items-center justify-content-center" style={{ minHeight: '100vh', margin: '0' }}>

        <div className="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
            <div className="d-flex flex-column align-items-center mb-3">
                <img src="logo.png" alt="Logo" className="mb-2" style={{ width: '120px', height: 'auto', borderRadius: '50%', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)' }} />
                <h3 style={{ color: '#2c3e50', fontWeight: '600', marginBottom: '1.5rem' }}>用户登录</h3>
            </div>
          <div className="bg-white rounded p-4 p-sm-5 mx-3" style={{ boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', border: 'none' }}>

            <Form onSubmit={handleSubmit}>
              <div className="form-floating mb-3">
                  <input
                      type="text"
                      className="form-control"
                      id="floatingInput"
                      placeholder="请输入用户名"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      style={{ border: '1px solid #ced4da', borderRadius: '8px', padding: '0.75rem' }}
                  />
                  <label htmlFor="floatingInput" style={{ color: '#495057', padding: '0.75rem' }}>用户名</label>
              </div>
              <div className="form-floating mb-4">
                <input
                  type="password"
                  className="form-control"
                  id="floatingPassword"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  style={{ border: '1px solid #ced4da', borderRadius: '8px', padding: '0.75rem' }}
                />
                <label htmlFor="floatingPassword" style={{ color: '#495057', padding: '0.75rem' }}>密码</label>
              </div>

              <Button type="submit" className="btn btn-primary py-3 w-100 mb-4" style={{ background: '#3498db', border: 'none', borderRadius: '8px', fontWeight: '600', fontSize: '1rem' }}>
                登录
              </Button>
                {error && <Alert variant="danger" style={{ borderRadius: '8px' }}>{error}</Alert>}
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;